<template>
    <div class="appFrame wh100">
        <appTop :leftText='leftText' :leftIcon='leftIcon' :leftIconSize='leftIconSize' :centerText="centerText" :rightIcon='rightIcon' :rightIconTip='rightIconTip' :rightIconTipColor='rightIconTipColor' :rightIconSize='rightIconSize' :rightIconTipSize='rightIconTipSize' @rightClick='rightClick' :scrollable="scrollable" :qrcode="qrcode" :camera="camera" @changeCamera="changeCamera" @changeQrcode="changeQrcode" @onRichScanCallback="onRichScanCallback">
            <template slot="header-left">
                <slot name="header-left" />
            </template>
            <template slot="header-center">
                <slot name="header-center" />
            </template>
            <template slot="header-right">
                <slot name="header-right" />
            </template>
        </appTop>
        <div class="appFrameMain" @touchstart.stop='start' @touchend.stop='end'>
            <slot></slot>
        </div>
        <appBottom v-if="showBottom" :selected='selected'></appBottom>

    </div>
</template>

<script>
const appTop = () => import('./top.vue')
const appBottom = () => import('./bottom.vue')
export default {
    components: { appTop, appBottom},
    props: {
        leftText: {
            type: String,
            default: ''
        },
        leftIcon: {
            type: String,
            default: ''
        },
        leftIconSize: {
            type: String,
            default: '20'
        },
        showBottom: {
            type: Boolean,
            default: true
        },
        selected: {
            type: Number,
            default: 0
        },
        centerText: {
            type: String,
            default: ''
        },
        rightIcon: {
            type: String,
            default: ''
        },
        rightIconSize: {
            type: String,
            default: '30'
        },
        rightIconTip: {
            type: String,
            default: ''
        },
        rightIconTipSize: {
            type: String,
            default: '10'
        },
        rightIconTipColor: {
            type: String,
            default: ''
        },
        touchBack: {
            type: Boolean,
            default: false
        },
        scrollable: {
            type: Boolean,
            default: false
        },
        qrcode: {
            type: Boolean,
            default: false
        },
        camera: {
            type: String,
            default: 'off'
        }
    },

    data () {
        return {
            startX: 0,
            endX: 0,
            height: ''
        }
    },
    created () {

    },

    mounted () {

    },
    methods: {
        start (e) {
            this.startX = e.changedTouches[0].clientX
        },
        end (e) {
            if (this.startX <= 50 && e.changedTouches[0].clientX - this.startX > 80) {
                if (this.touchBack) {
                    this.$router.back(-1)
                }
            }
        },
        rightClick (data) {
            this.$emit('rightClick', data)
        },
        onSwipeRight () {
            if (this.touchBack) {
                this.$router.back(-1)
            }
        },
        changeCamera(e) {
            this.$emit('changeCamera', e)
        },

        changeQrcode(e) {
            this.$emit('changeQrcode', e)
        },
        onRichScanCallback (res) {
            this.$emit('onRichScanCallback', res)
        }
    }
}
</script>

<style lang='scss'>
.content {
    width: 100%;
    height: 100%;
}
.appFrame {
    display: flex;
    flex-direction: column;
    position: relative;
    .appFrameMain {
        width: 100%;
        // height: calc(100% - 70px - 54px);
        flex: 1;
        background-color: #181c29;
        padding: 0 16px;
        overflow: hidden;
    }
}
</style>
